<template>
  <scroll-view @scrolltolower="handleTolow" scroll-y  class="album_wrap">
    <!-- 轮播图 -->
    <view class="album_swiper">
      <swiper autoplay circular indicator-dots>
        <swiper-item v-for="item in bannerList" :key="item.id">
          <image :src="item.thumb" mode="widthFix" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 专辑详情 -->
    <view class="album_list">
      <navigator class="album_item" v-for=" item in albumList"
       :key="item.id" :url="`/pages/album/index?id=${item.id}`">
        <!-- 图片 -->
        <view class="album_img">
          <image :src="item.cover" mode="aspectFill" />
        </view>
        <!-- 详细 -->
        <view class="album_info">
          <view class="album_name">{{item.name}}</view>
          <view class="album_desc">{{item.desc}}</view>
          <view class="album_btn">
            <view class="album_attention">关注</view>
          </view>
        </view>
      </navigator>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        limit: 30,
        order: "new",
        skip: 0
      },
      bannerList: [],
      albumList: [],
      hasMore:true
    };
  },
  methods: {
    getList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
        data: this.params
      }).then(res => {

        if(this.params.skip>90){
          this.hasMore = false;
        }
        if(res.res.album === 0 ){
          this.hasMore = false;
          return;
        }

        if(this.bannerList.length === 0 ){
          this.bannerList = res.res.banner;
        }
        
        this.albumList =[...this.albumList , ...res.res.album];
      });
    },
    handleTolow(){
      if(this.hasMore){
        this.params.skip += this.params.limit;
      this.getList();
      }else{
        uni.showToast({
          title:"已经被榨干啦!TAT",
          icon:"none"
        })
      }
      
    }
  },
  mounted() {
    uni.setNavigationBarTitle({ title: "专辑" });
    this.getList();
  }
};
</script>

<style lang="scss" scoped>

.album_wrap{
  height: calc( 100vh - 35px );
}

.album_swiper {
  // 2.3 = 图片宽高比  750rpx=屏幕
  height: calc(750rpx / 2.3);
  image {
    height: 100%;
  }
}

.album_list {
  padding: 10rpx;

  .album_item {
    display: flex;
    padding: 10rpx;
    border-bottom: solid 1rpx #000;
    .album_img {
      flex: 1;
      width: 200rpx;
      
      image {
        height: 200rpx;
        padding: 10rpx;
        border-radius: 20%;
      }
    }

    .album_info {
      overflow: hidden;
      flex: 2;
    
      .album_name {
        font-size: 30rpx;
        color: #000;
        padding: 10rpx 0;
        font-weight: 600;
      }

      .album_desc {
        padding: 10rpx 0;
        font-size: 24rpx;

        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .album_btn {
        padding: 10rpx;
        display: flex;
        justify-content: flex-end;

        .album_attention {
          color: $color;
          border: 2rpx $color solid;
          padding: 10rpx;
        }
      }
    }
  }
}
</style>